<template>
    <div>
        <div class="notice-bar"
             :style="{borderColor: color}"
        >
            <div role="alert" class="van-notice-bar title-item"
                 :style="{color: color,background:bg}">
                <i class="van-icon van-notice-bar__left-icon">
                    <div class="van-image van-icon__image">
                        <img v-if="keyType === '0'"
                             :src="leftIcon"
                             class="van-image__img anim_fade_image" style="object-fit: contain;">
                        <img v-else
                             :src="leftIcon"
                             class="van-image__img" style="object-fit: contain;">
                    </div>
                </i>
                <div role="marquee" class="van-notice-bar__wrap" @click="goAction">
                    <div class="van-notice-bar__content van-notice-bar__play--infinite"
                         style="padding-left: 10px; animation-delay: 0s; animation-duration: 16.2781s;">
                        关于在全市推广“健康通行码”的通告（第 10 号）
                    </div>
                </div>
            </div>
            <div role="alert" class="van-notice-bar show-three-text"
                 :style="{color: color,background:bg}">
                <div role="marquee"  @click="gohref(2)">
                    <div>
                        我的健康码信息
                    </div>
                </div>
                <div class="three-line">|</div>
                <div  @click="gohref(3)">
                    <div>
                        国家防疫码
                    </div>
                </div>
                <div class="three-line">|</div>
                <div  @click="gohref(1)">
                    <div>
                        辽宁健康码
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="notice-bar" :style="{borderColor: color}">
            <van-notice-bar
                    :color="color"
                    :background="bg"
                    :left-icon="leftIcon"
                    @click="goAction"
            >
                关于在全市住宅小区（村）推行居民出入通行证制度的通告（第8号）
            </van-notice-bar>
        </div>-->
        <van-popup v-model="guoJiaShow" class="guo-jia-show">
            <div class="guo-jia-show-header">
                <div>健康证明情况</div>
                <div class="guo-jia-show-more" @click="goMoreAction">查看更多</div>
            </div>
            <van-cell-group>
                <van-cell title="健康状态" :value="getTypeTitle"/>
                <van-cell title="健康报告日期" :value="getTimeToData"/>
                <van-cell title="数据来源" value="国家政务服务平台"/>
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script>
import { getArticleListNoUserList, getOpenidInfo } from '@/api/yi-qing-fang-kong.js'
import moment from 'moment'

export default {
  name: 'NoticeBar',
  data () {
    return {
      formData: {},
      keyType: '0',
      guoJiaShow: false,
      userInfo: {}
    }
  },
  props: {
    color: {
      type: String,
      default: () => {
        return ''
      }
    },
    bg: {
      type: String,
      default: () => {
        return ''
      }
    },
    leftIcon: {
      type: String,
      default: () => {
        return 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2016@2x.png'
      }
    },
    type: {
      type: String,
      default: () => {
        return '1'
      }
    }
  },
  computed: {
    temporary () {
      if (this.type === '8') {
        return '我的(临时)健康通行码信息'
      } else {
        return '我的健康通行码信息'
      }
    },
    getTypeTitle () {
      if (this.userInfo.type === '1') {
        return '低风险'
      }
      if (this.userInfo.type === '3') {
        return '中风险'
      }
      if (this.userInfo.type === '4') {
        return '高风险'
      }
      return '无'
    },
    getTimeToData () {
      if (this.userInfo.create_time) {
        return moment(parseInt(this.userInfo.create_time)).format('YYYY-MM-DD')
      } else {
        return ''
      }
    }
  },
  mounted () {
    // this.init()
    if (window.localStorage.getItem('keyType') === '1') {
      this.keyType = '1'
    }
  },
  methods: {
    gohref (data) {
      if (data === 2) {
        this.guoJiaShow = true
        this.getDbUserInfo()
      } else if (data === 3) {
        this.$router.push({ name: 'epidemic-show-info-country' })
      } else {
        this.$router.push({ name: 'publicInfo' })
      }
    },
    goAction: function () {
      window.localStorage.setItem('keyType', '1')
      this.$router.push({ name: 'medias' })
      // window.location.href = this.formData.link
      // window.location.href = 'https://house-manager.oss-cn-qingdao.aliyuncs.com/%E5%85%B3%E4%BA%8E%E5%9C%A8%E5%85%A8%E5%B8%82%E6%8E%A8%E5%B9%BF%E2%80%9C%E5%81%A5%E5%BA%B7%E9%80%9A%E8%A1%8C%E7%A0%81%E2%80%9D%E7%9A%84%E9%80%9A%E5%91%8A.pdf'
    },
    init () {
      getArticleListNoUserList({ category_id: '3' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          data.data.forEach(item => {
            if (item.article_id === '3-1') {
              this.formData = item
            }
          })
        } else {
          this.failNotice(data.errmsg)
        }
      })
    },
    getDbUserInfo () {
      getOpenidInfo().then(ret => {
        if (ret.data.errcode === 0) {
          this.userInfo = ret.data.data
        }
      })
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    goMoreAction () {
      this.$router.push({
        name: 'shou-guo-jia-info'
      })
    }
  },
  watch: {}
}
</script>

<style scoped lang="less">
    .notice-bar {
        margin: 0.425rem 0.625rem 0.425rem;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid;
    }

    /deep/ .van-notice-bar__left-icon {
        font-size: 1.325rem;
        padding-right: 5px;
    }

    /deep/ .van-notice-bar {
        height: 2.225rem;
    }

    @-webkit-keyframes fadeInOut {
        0% {
            opacity: 1;
        }
        25% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        75% {
            opacity: 1;
        }
    }

    .anim_fade_image {
        position: absolute;
        -webkit-animation-name: fadeInOut;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 2s;
        -webkit-animation-direction: alternate;
    }

    .title-item {
        border-bottom: 1px solid;
    }

    .guo-jia-show {
        width: 90%;

        &-header {
            margin: 10px;
            display: flex;
            justify-content: space-between;
        }

        &-more {
            font-size: 14px;
            color: #00a1db;
        }
    }
    .show-three-text{
        font-size: .8rem;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .three-line{
        padding: 0 .4rem 0 .4rem;
    }
</style>
